<template>
  <div>
    <div class="bg-container">
      <div class="bg-img">
        <!-- <el-image :src="bgImg" fit="cover"> </el-image> -->
        <el-carousel indicator-position="inside" height="500px">
          <el-carousel-item v-for="item in bgImg" :key="item.id">
            <a :href="item.redirectUrl ? item.redirectUrl : ''">
              <el-image :src="item.picture" fit="cover"> </el-image>
            </a>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="self-container">
      <div class="img-list">
        <div
          v-for="item in imgList"
          :key="item.id"
          class="img-item cursor-pointer"
          :style="{
            background: `url(${require('@/assets/page-head/policy.png')}) center center`,
          }"
          @click="toDetail(item)"
        >
          <h4 class="pb-8">{{ item.name }}</h4>
          <div class="item-btn">
            查看政策
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cityJson from '@/utils/cityList.json'
export default {
  data() {
    return {
      bgImg: [
        {
          picture: require('@/assets/page-head/policy.png'),
          address: '南昌市',
        },
      ],
      imgList: [
        // {
        //   id: 0,
        //   picture: require('@/assets/page-head/policy.png'),
        //   address: '南昌市',
        // },
        // {
        //   id: 0,
        //   picture: require('@/assets/page-head/policy.png'),
        //   address: '九江市',
        // },
        // {
        //   id: 1,
        //   picture: require('@/assets/page-head/policy.png'),
        //   address: '上饶市',
        // },
        // {
        //   id: 2,
        //   picture: require('@/assets/page-head/policy.png'),
        //   address: '抚州市',
        // },
        // {
        //   id: 2,
        //   picture: require('@/assets/page-head/policy.png'),
        //   address: '宜春市',
        // },
        // {
        //   id: 2,
        //   picture: require('@/assets/page-head/policy.png'),
        //   address: '吉安市',
        // },
        // {
        //   id: 2,
        //   picture: require('@/assets/page-head/policy.png'),
        //   address: '赣州市',
        // },
        // {
        //   id: 2,
        //   picture: require('@/assets/page-head/policy.png'),
        //   address: '景德镇市',
        // },
        // {
        //   id: 2,
        //   picture: require('@/assets/page-head/policy.png'),
        //   address: '萍乡市',
        // },
        // {
        //   id: 2,
        //   picture: require('@/assets/page-head/policy.png'),
        //   address: '鹰潭市',
        // },
      ],
    }
  },
  mounted() {
    this.imgList = cityJson
  },
  methods: {
    toDetail(item) {
      if (item?.id || item.id === 0) {
        let path = '/locationCity/' + item.id
        this.$router.push({ path })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.bg-container {
  width: 100%;
  height: 500px;
  position: relative;
  .bg-img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 500px;

    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  .identity-list {
    height: 100%;
    padding-right: 360px;
    display: flex;
    flex-flow: nowrap column;
    justify-content: center;
    align-items: flex-end;
    color: #fff;
    .item {
      z-index: 1000;
      width: 308px;
      height: 122px;
      padding: 10px;
      margin-bottom: 17px;
      border-radius: 5px;
      cursor: pointer;
      background: #ffffff6c;
      // backdrop-filter: blur(6px);
      transition: 300ms ease-in all;
      .title {
        height: 2.5rem;
        line-height: 2.5rem;
        min-width: 8rem;
        text-align: center;
        font-size: 1.2rem;
        color: #fff;
      }

      .el-divider--horizontal {
        margin: 20px 0;
      }

      .el-divider__text {
        position: absolute;
        background: #ffffff6c;
        color: #fff;
      }

      .sub-item {
        height: 2rem;
        line-height: 2rem;
        min-width: 33.3%;
        text-align: center;
        font-size: 12px;
        a {
          color: #fff;
        }
      }
    }
  }
}
.img-list {
  @apply grid grid-cols-3 gap-4 py-8;

  .img-item {
    width: 384px;
    height: 240px;
    @apply flex flex-col justify-center items-center text-center text-white;

    .item-btn {
      width: 144px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      border: 1px solid #ffffff;
      border-radius: 4px;
    }
  }
}
</style>
